<template>
  <div id="titlebox">
    <div id="Title" :style="TitleHeightStyle">
      <silder-img-c :imgarr="ImgArr" :SliderIconWidth="70" v-show="titleshow"> </silder-img-c>
      <linear-c></linear-c>
      <div class="flex" style="flex: 1; width: 100%" v-show="titleshow">
        <bas-c></bas-c >
      </div>
      <div
        class="flex-inherit title"
        style="flex: 4; width: 100%"
        v-show="titleshow"
      >
        <imitationinput>Welcome Come To My Blog!</imitationinput>
        <loginicon-c></loginicon-c>
      </div>
      <div class="flex flex-end flex-justify-start" style="flex: 1;width:100%">
        <nav-c :isshow="titleshow"></nav-c>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from "@/assets/js/bus.js";
import { ThroTtle } from "@/assets/js/ThroTtle";
import SilderImgC from "@/components/common/silderimg/SliderImg.vue";
import linearC from "@/components/common/linear/linear";
import loginiconC from "@/components/title/loginicon/loginicon.vue";
import basC from "@/components/title/bas/bas";
import navC from "@/components/title/nav/nav";
import Imitationinput from "../common/imitationinput/imitationinput.vue";
import elementResizeDetectorMaker from "element-resize-detector";

export default {
  name: "Title",
  components: {
    SilderImgC,
    loginiconC,
    basC,
    navC,
    linearC,
    Imitationinput,
  },
  data() {
    return {
      ImgArr: [
        require("@/assets/img/sliderimg/BK5.jpg"),
        require("@/assets/img/sliderimg/BK3.jpg"),
      ],
      height: 95,
      boxheight: 100,
      titleheight: 95,
      cacheheight: 95,
      titleshow: true,
      offsetheight: 0,
      refresh: 0,
    };
  },
  methods: {
    scrollactive(scrolltop) {
      //通过计算得出的相对最大高度
      let number = 0.0013 * this.scrolltopmax;
      //当前滚动距离的百分比
      let nowbaifenbi = ((scrolltop / this.scrolltopmax) * number).toPrecision(
        2
      );
      //盒子实际的高度百分比=（滚动条最大百分比-当前百分比)
      let baifenbi = (1 - nowbaifenbi).toPrecision(2);
      if (scrolltop >= this.scrolltopmax) {
        this.titleheight = this.height * 0;
        this.titleshow = false;
      } else {
        this.height * baifenbi < 0
          ? (this.titleheight = 0)
          : (this.titleheight = this.height * baifenbi);
      }
    },
  },
  mounted() {
    window.addEventListener(
      "scroll",
      ThroTtle(() => {
        //滚动条距离顶部距离
        let scrolltop = Math.floor(
          document.documentElement.scrollTop || document.body.scrollTop
        );
        //触发缩放菜单栏的方法
        this.scrollactive(scrolltop);
        //向其他组件传递滚动信息
        let scrollvariable = {
          scrolltop: scrolltop,
          clientheight: this.clientheight,
          scrolltopmax: this.scrolltopmax,
        };
        Bus.$emit("isscroll", scrollvariable);
      }, 0)
    );

    //监听body元素实时的高度变化
    const _this = this;
    const erd = elementResizeDetectorMaker();
    erd.listenTo(document.body, (element) => {
      _this.$nextTick(() => {
        this.offsetheight = element.offsetHeight;
      });
    });
    //监听浏览器窗口是否有变化
    window.onresize = () => {
      this.refresh++;
    };
  },
  computed: {
    scrollheight() {
      //整体页面的高度
      return this.offsetheight;
    },
    clientheight() {
      //可视区域高度
      if (this.refresh || this.$route) {
        return document.documentElement.clientHeight;
      }
    },
    scrolltopmax() {
      //滚动条距离底部最大距离=整体页面高度-可视区域高度
      if (this.$route) {
        return Math.floor(
          this.scrollheight - document.documentElement.clientHeight
        );
      }
    },
    TitleHeightStyle() {
      if (this.$route) {
        return { height: this.titleheight + "vh" };
      }
    },
    RouteChange() {
      if (this.$route) {
        return this.$route.path;
      }
    },
  },
  watch: {
    titleheight() {
      this.titleheight < 20
        ? (this.titleshow = false)
        : (this.titleshow = true);
    },
    //监听路由的变化，判断菜单栏的高度
    RouteChange() {
      if (
        this.RouteChange.indexOf("/home") != -1 ||
        this.RouteChange.indexOf("/messageboard") != -1
      ) {
        this.height = 95;
        this.cacheheight = this.height;
        this.titleheight = this.height;
        document.getElementById("titlebox").style.height = "100vh";
      } else {
        this.height = 0;
        this.cacheheight = this.height;
        this.titleheight = this.height;
        document.getElementById("titlebox").style.height = "70px";
      }
    },
  },
};
</script>


<style lang="scss" scoped>
#Title {
  width: 95vw;
  padding-left: 2.5vw;
  padding-right: 2.5vw;
  padding-top: 2.5vh;
  padding-bottom: 2.5vh;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-height: 40px;
  overflow: hidden;
  position: fixed;
  z-index: 100;
  background-color: #18191A;
  box-shadow: 0px 0px 3px black;
}
.maxheight {
}
.titleactive {
  transition: all 0.2s;
  max-height: 60vh;
}
#titlebox {
  height: 100vh;
  position: relative;
  width: 100%;
  min-height: 40px;
}
.title {
  font-size: 2.5rem;
  font-weight: bold;
  color: white;
}
@media screen and (max-width: 1024px) {
  #Title {
    min-width: 900px;
    height: 100%;
    max-height: 500px;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  #titlebox {
    max-height: 500px;
   
  }
}
</style>
